<template>
  <el-dialog width="900px" :close-on-click-modal="false" :title="title" @close="close" :visible.sync="visible" append-to-body>
    <div class="information">
      <el-form :model="detail">
        <el-row>
          <el-form-item label="质检信息" class="w-100percent bold bg-lightGray"></el-form-item>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="质检员：">
              <span>{{ detail.confirmerName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="加工合格：">
              <span>{{ detail.numWorkQualifiedWork }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="调试合格：">
              <span>{{ detail.numWorkQualifiedDebug }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="返工合格：">
              <span>{{ detail.numWorkQualifiedRework }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="质检时间：">
              <span>{{ detail.confirmTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="待处理数量：">
              <span>{{ detail.numWorkPending }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工废数量：">
              <span>{{ detail.numWorkWasteIndustrial }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="料废数量：">
              <span>{{ detail.numWorkWasteMaterial }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form :model="detail">
        <el-row>
          <el-form-item label="审核信息" class="w-100percent bold bg-lightGray"></el-form-item>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="审核人：">
              <span>{{ detail.auditorName }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="审核时间：">
              <span>{{ detail.auditTime }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="审核数量：">
              <span>{{ detail.numWorkPending }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="审核合格数量：">
              <span>{{ detail.numAuditQualified }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核料废数量：">
              <span>{{ detail.numAuditWasteMaterial }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核工废数量：">
              <span>{{ detail.numAuditWasteIndustrial }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发起评审数量：">
              <span>{{ detail.numAuditPending }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="detail">
        <el-row>
          <el-form-item label="评审信息" class="w-100percent bold bg-lightGray"></el-form-item>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="评审人：">
              <span>{{ detail.reviewerName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评审时间：">
              <span>{{ detail.reviewTime }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评审数量：">
              <span>{{ detail.numAuditPending }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="评审合格数量：">
              <span>{{ detail.numReviewQualified }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评审料废数量：">
              <span>{{ detail.numReviewWasteMaterial }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评审工废数量：">
              <span>{{ detail.numReviewWasteIndustrial }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评审返修数量：">
              <span>{{ detail.numReviewRework }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="待处理汇总" class="w-100percent bold bg-lightGray"></el-form-item>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="待处理：">
              <span>{{ detail.numWorkPending }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="合格：">
              <span>{{ detail.numAuditQualified + detail.numReviewQualified }}</span>
              <span>{{ pendingQualityState }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="废品：">
              <span>{{ detail.numAuditWasteMaterial + detail.numAuditWasteIndustrial + detail.numReviewWasteMaterial + detail.numReviewWasteIndustrial }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="返修：">
              <span>{{ detail.numReviewRework }}</span>
              <span>{{ pendingRepairState }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-col :span="12">
            <el-button type="primary" @click="dispatch(0)">派工（合格）</el-button>
            <el-button type="primary" @click="dispatch(1)">派工（返修）</el-button>
            <el-button @click="back">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>



<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const vuexInspection = namespace('FiveInspection')

@Component({
  components: {}
})
export default class DialogDetail extends Vue {
  public $refs!: {}

  @vuexInspection.State detail: any
  @vuexInspection.State inpsectionState: any
  visible: boolean = false
  title: string = '查看详细信息'

  pendingRepairState: string = ''
  pendingQualityState: string = ''

  open() {
    this.visible = true
    console.log(this.inpsectionState);
    console.log("=========");
    if (this.inpsectionState != '质检完成') {
      this.pendingRepairState = '（流程中）'
      this.pendingQualityState = '（流程中）'
    } else {
      this.pendingRepairState = this.detail.needPendingRepair ? '（未派工）' : '（已派工）'
      this.pendingQualityState = this.detail.needPendingQualified ? '（未派工）' : '（已派工）'
    }
  }
  close() {
    this.visible = false
  }

  back() {
    this.$router.go(-1)
  }

  dispatch(from: number) {
    if (this.detail.state != 5) {
      this.$alert('质检流程还未结束')
    } else if (from == 0 && !this.detail.needPendingQualified) {
      this.$alert('待处理合格品已派工')
    } else if (from == 1 && !this.detail.needPendingRepair) {
      this.$alert('待处理返修品已派工')
    } else {
      this.$emit('re-dispatch', {
        type: from,
        number: from == 0 ? this.detail.numAuditQualified + this.detail.numReviewQualified : this.detail.numReviewRework
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  overflow: hidden;
  .el-dialog {
    height: 85vh;
    margin-top: 5vh !important;
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      flex: 1;
      // height: 450px;
      overflow: auto;
      .information {
        .el-form-item {
          margin-bottom: 10px;
        }
        .el-table {
          .el-input__inner {
            border: none;
            background: transparent;
          }
        }
      }
      .el-input__inner {
        background-color: #fff;
        border-color: #e4e7ed;
        color: #000;
        cursor: not-allowed;
      }
      .product {
        height: 25vh;
        margin-bottom: 10px;
      }
    }
    .el-dialog__footer {
      border-top: 1px solid #eee;
      padding: 10px 20px;
      background: #fefefe;
    }
    .custom-table {
      // 取消表格下边线
      tbody tr:last-child td {
        border-bottom: none !important;
      }
    }
  }
}
</style>

